@extends("template.default")

@section("content")

    <div class="content row">
        <div class="col-md-12">

            <button class="btn btn-info">测试</button>

        </div>
    </div>

    <hr/>

    <div class="row">

        <div class="col-md-12">
            <span class="text-center"> 你好啊 </span>
        </div>

        <div class="col-md-12 text-right">
            <label>你好</label>
            <label>wohao</label>

        </div>

        <div class="col-md-12">
            <blockquote> 来自引用</blockquote>
        </div>

    </div>


    {{--代码--}}
    <code>

        &lt;hell ow &gt;

    </code>

    {{--代码块--}}
    <pre>
        hello,
        this
    </pre>

    <div>
        <dl class="dl-horizontal">
            <dt>拾金不昧</dt>
            <dd>指良好的人的道德和社会风尚</dd>
        </dl>
    </div>


    {{--表单--}}
    <hr/>

    <div>
        <form class="form-group">
            <div class="form-group">
                <label class="">用户名</label>
                <input type="text" class="form-control" placeholder="请输入用户名">
            </div>


            <div class="form-group">
                <label class="">密码</label>
                <input type="password" class="form-control" placeholder="请输入密码">
            </div>
        </form>
        <hr/>

        {{--合并--}}
        <form class="form-group">
            <div class="input-group">
                <label class="input-group-addon">用户名</label>
                <input type="text" class="form-control" placeholder="请输入用户名">
            </div>


            <div class="input-group">
                <input type="password" class="form-control" placeholder="请输入密码">
                <label class="input-group-addon">密码</label>
            </div>
        </form>


        <hr/>

        {{--内联为一行--}}
        <form class="form-inline">
            <div class="input-group">
                <label class="input-group-addon">用户名</label>
                <input type="text" class="form-control" placeholder="请输入用户名">
            </div>


            <div class="input-group">
                <input type="password" class="form-control" placeholder="请输入密码">
                <label class="input-group-addon">密码</label>
            </div>
        </form>


        <hr/>
        {{--水平--}}
        <form class="form-horizontal">
            <div class="form-group has-feedback">
                <label class="col-md-2 control-label">用户名</label>

                <div class="col-md-10">
                    <input type="text" class="form-control" placeholder="请输入用户名">
                    {{--添加一个图标， 注意  form-control-feedback 和 div 上的 has-feedback 配合使用，保证图片在输入框最右边--}}
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>

            <div class="form-group has-feedback">
                <label class="col-md-2 control-label">用户名</label>

                <div class="col-md-10">
                    <input type="text" class="form-control" placeholder="请输入用户名">
                    {{--添加一个图标， 注意  form-control-feedback 和 div 上的 has-feedback 配合使用，保证图片在输入框最右边--}}
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>

            <div class="form-group">
                <div class="input-group col-md-10 col-md-offset-2">
                    <label class="input-group-addon">密码</label>
                    <input type="text" class="form-control has-feedback" placeholder="请输入密码">
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>

            <div class="input-group col-md-10 col-md-offset-2 has-feedback">
                <div class="has-feedback">
                    <input type="password" class="form-control" placeholder="请再次输入密码">
                    <span class="glyphicon glyphicon-alert form-control-feedback"></span>
                </div>
                <label class="input-group-addon">密码</label>

            </div>
        </form>
    </div>



    <div>
        <hr/>
        <button class="close">&times;</button>
        <span class="caret"></span>

        <label class="pull-left">左边</label>
        <label class="pull-right">右边</label>
    </div>

    <div>
        <hr/>
    </div>

    {{--下拉菜单--}}
    <div class="dropdown">
        <button class="btn btn-default" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">标题</li>
            <li><a href="#">1</a></li>
            <li class="divider"></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li class="divider"/>
            <li class="disabled"><a href="#">disable</a></li>
        </ul>
    </div>

    <div class="btn-group">
        <button class="btn btn-default" data-toggle="dropdown">下拉菜单</button>
        <button class="btn btn-default" data-toggle="dropdown">&nbsp;
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">标题</li>
            <li><a href="#">1</a></li>
            <li class="divider"></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li class="divider"/>
            <li class="disabled"><a href="#">disable</a></li>
        </ul>
    </div>

    <div>
        <hr/>
    </div>




    {{--嵌套一个分组--}}
    <div class="btn-group btn-group-lg">
        <button class="btn btn-info">one</button>
        <button class="btn btn-info">two</button>
        <button class="btn btn-info">three</button>
        <div class="btn-group btn-group-lg">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                下来菜单
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">1</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">1</a></li>
            </ul>
        </div>
    </div>


    {{--垂直分组--}}
    <div class="btn-group btn-group-vertical">
        <button class="btn btn-info">1</button>
        <button class="btn btn-default">2</button>
        <button class="btn btn-success">3</button>
    </div>

    <div>

        <hr/>
    </div>

@stop